const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin')
const CopyWebpackPlugin = require("copy-webpack-plugin")
module.exports = {
    // 入口文件路径
    entry: path.resolve(__dirname,"../src/index.js"),
    // 出口配置
    output: {
        path: path.resolve(__dirname,"../build"),
        filename: "./js/bundle.js"
    },
    // loader配置
    module: {
        rules: [{
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
        
        {
            test: /\.less$/,
            use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
        },
        
        {
            test: /\.(png|jpg|gif|webp)$/,
            //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
            type: "asset",
            parser: {
                dataUrlCondition: {
                    maxSize: 30 * 1024, // 小于30kb以下的图片会被打包成base64格式
                },
            },
            generator: {
                filename: 'images/[name][ext]'
            }
        },

        {
            test: /\.(htm|html)$/i,
            use: {
                loader: 'html-loader'
            }
        }
    ],
        
    },

    optimization: {
        minimizer: [
          new CssMinimizerPlugin(),
        ],
        minimize: true,
      },

      
    //插件配置
    plugins: [

        new MiniCssExtractPlugin({
        //输出独立文件的文件名
        filename: './css/main.css',
    }),

    new HtmlWebpackPlugin({
        filename: "index.html",
        template: path.resolve(__dirname, "../public/index.html"),
        minify: {
            // 压缩空白
            collapseWhitespace: true,
            // 保持斜杠
            keepClosingSlash: true, 
            // 是否移除注释
            removeComments: true,
            // 移除多余的元素 
            removeRedundantAttributes: true,
            // 移除多余的标签
            removeScriptTypeAttributes: true,

            removeStyleLinkTypeAttributes: true,
            
            useShortDoctype: true
        }
    }),

    new ESLintPlugin({fix: true}),

    new CopyWebpackPlugin({
        patterns: [{
            from: path.resolve(__dirname, "../public"),
            to: "public",
            // 配置忽略文件
            globOptions: {
                ignore: ["**/index.html"]
            }
        }],
    }),
],

    mode: "production"

}